<template>
  <view class="comment-list">
	  <view class="null" v-if="comments.length==0">
	  	您还没有任何评论和回复
	  </view>
      <view 
        v-for="(comment, index) in comments" 
        :key="index"
      >
		<view v-if="comment.receiverId==uid">
			<view class="comment-item" v-if="comment.code==6" >
				<!-- 头像 -->
				<u-avatar :src="comment.avatar" @click="goToPersonalInformation( comment.senderId, comment.sender)" mode="aspectFill" class="avatar"></u-avatar>
				
				<view @click="goToLiveDisplay(comment.receiverId,comment.postId)">
					<!-- 用户名、日期和评论内容 -->
					<view class="comment-body">
					  <view class="header">
					    <text class="username">{{ comment.sender }}</text>
					    <text class="date">在{{ timeShow(comment.time) }} {{comment.msg}}</text>
					  </view>
					  <view  class="comment-details">
					    <text>{{ comment.comment}}</text>
					  </view>
					  <view class="comment-content">
					    <text>{{comment.title  }}</text>
					  </view>
					</view>
				</view>
			</view>
			<view class="comment-item" v-else>
				<!-- 头像 -->
				<u-avatar :src="comment.avatar" @click="goToPersonalInformation( comment.senderId, comment.sender)" mode="aspectFill" class="avatar"></u-avatar>
				
				<view @click="goToLiveDisplay(comment.receiverId,comment.postId)">
					<!-- 用户名、日期和评论内容 -->
					<view class="comment-body">
					  <view class="header">
					    <text class="username">{{ comment.sender }}</text>
					    <text class="date">在{{ timeShow(comment.time) }} {{comment.msg}}</text>
					  </view>
					  <view  class="comment-detail">
					    <text>{{  comment.otherComment}}</text> 
					  </view>
					  <view class="comment-content">
					    <text>{{comment.myComment}}</text>
					  </view>
					</view>
				</view>
			</view>
			
			
		</view>
		
      </view>
  </view>
</template>

<script>
	import { mapState } from 'vuex';
export default {
	computed: {
		    ...mapState(["isCommentsChange"]), // 映射 Vuex 状态
		 },
	watch:{
		// isCommentsChange(newVal, oldVal) {
		// 	this.comments=uni.getStorageSync('commentsList')||[]
		// 	this.$store.commit("changeComments",null);
		// },
	},
  data() {
    return {
		uid:null,
      comments: [
        // {
        //   sender: "徐海东",
        //   time: "2024-09-03",
		// msg:""
        //   commnet: "平哥，你真牛！！！",
        //   title: "如何十分钟手搓黑红树",
        //   avatar: "https://ts3.cn.mm.bing.net/th?id=OIP-C.Erum9yreLBLbYTOMWWzGIwAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2"
        // },
      ]
    };
  },
  created() {
  	this.comments=uni.getStorageSync('commentsList')||[]
	this.comments.forEach((data)=>{
		data.avatar=uni.getStorageSync('userAvatar'+data.senderId)
	})
	this.uid=uni.getStorageSync('UID')
  },
  methods:{
	  goToPersonalInformation(uid, username) {
	    uni.navigateTo({
	      url: "/pages/personalInformation/personalInformation?uid=" + uid+"&username="+username
	    });
	  },
	  goToLiveDisplay(uid, postId) {
	    uni.navigateTo({
	      url: "/pages/liveDisplay/liveDisplay?uid=" + uid + "&postId=" + postId,
	    });
	  },
	  timeShow(timestamp){
	  		 const now = new Date();
	  		    const messageTime = new Date(timestamp);
	  		    const diffInSeconds = Math.floor((now - messageTime) / 1000);
	  		    
	  		    if (diffInSeconds < 60) {
	  		        return '刚刚';
	  		    } else if (diffInSeconds < 3600) {
	  		        const minutes = Math.floor(diffInSeconds / 60);
	  		        return `${minutes}分钟前`;
	  		    } else if (diffInSeconds < 86400) {
	  		        const hours = Math.floor(diffInSeconds / 3600);
	  		        return `${hours}小时前`;
	  		    } else {
	  		        const year = messageTime.getFullYear();
	  		                const month = String(messageTime.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的
	  		                const day = String(messageTime.getDate()).padStart(2, '0');
	  		                const hour = String(messageTime.getHours()).padStart(2, '0');
	  		                const minute = String(messageTime.getMinutes()).padStart(2, '0');
	  		                
	  		                return `${year}-${month}-${day} ${hour}:${minute}`;
	  		    }
	  		},
  }
};
</script>

<style>
.comment-list {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 每条评论的整体布局 */
.comment-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 15rpx;
  background-color: #ffffff;
  border-radius: 8rpx;
  margin:0 20rpx 20rpx 20rpx;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 头像样式 */
.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 10rpx;
  border: 2px solid #e0e0e0;
}

/* 评论内容容器 */
.comment-body {
  flex: 1;
}

/* 用户名和日期的布局 */
.header {
  display: flex;
  flex-direction: column;
  margin-bottom: 5rpx;
}

/* 用户名样式 */
.username {
  font-weight: bold;
  color: #333;
  font-size: 32rpx;
}

/* 日期样式 */
.date {
  color: #999;
  font-size: 24rpx;
  margin-top: 4rpx;
}

/* 评论内容样式 */
.comment-content {
  color: gainsboro;
   width: 100%;
  font-size: 26rpx;
  display: -webkit-box;
  white-space: normal;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; 
  line-height: 1.6;
  border-radius: 6rpx;
}

/* 详细内容样式 */
.comment-details {
  margin-top: 4rpx;
  width: 100%;
  display: -webkit-box;
  white-space: normal;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  color: #666;
  font-size: 30rpx;
  font-weight: bold;
  line-height: 1.5;
  border-radius: 6rpx;
}
.comment-details {
  margin-top: 4rpx;
  width: 100%;
  display: -webkit-box;
  white-space: normal;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  color: #666;
  font-size: 26rpx;
  line-height: 1.5;
  border-radius: 6rpx;
}
.null{
	padding-top: 100rpx;
	color: lightgray;
	font-size: 30rpx;
	text-align: center;
}
</style>